<template>
  <div class="review_wrapper">
    <div class="review_inner" style="padding: 30px;">


      <div class="review_top_wrapper">
        <div class="review_inner">
          <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
            <el-radio-button label="find">搜索单词</el-radio-button>
            <el-radio-button label="list">列表形式</el-radio-button>
            <el-radio-button label="block">块状形式</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <el-form label-width="80px" v-if="tabPosition == 'find'">
        <el-form-item label="单词" >
          <el-input v-model="word.word"></el-input>
        </el-form-item>
        <el-form-item label="程度">
          <div>重要度</div>
          <el-select v-model="word.imp" filterable placeholder="重要度">
            <el-option v-for="item in imps" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
          <div>熟练度</div>
          <el-select v-model="word.cmd" filterable placeholder="熟练度" style="">
            <el-option v-for="item in cmds" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="特征">
          <el-select style="width: 100%;" v-model="word.features" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
            <el-option v-for="item in sys_features" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加特征" style="">
          <div class="add_feature_wrapper">
            <div class="add_feature_inner" style="display: flex;">
              <el-input placeholder="请输入内容" v-model="feature_input" clearable style="margin-right: 0px;"></el-input>
              <div style="padding-left: 10px;">
                <el-button type="primary" icon="el-icon-edit" circle @click=""></el-button>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" icon=""  @click="" style="width: 100%;" @click="getWords">搜索单词</el-button>
        </el-form-item>
      </el-form>

      <WordList :word_list="word_list" v-if="tabPosition == 'list'" v-on:delword = "getWords"></WordList>
      <WordBlock v-if="tabPosition == 'block'" v-on:getwordlist="cloneWordList" :word_list="word_list_concat"></WordBlock>


    </div>
  </div>
</template>

<script>
  import WordList from "./WordList";
  import WordDetail from "./WordDetail";
  import WordBlock from "./WordBlock";
  import {postRequest} from "../utils/api";
  import {mapGetters, mapState} from 'vuex';
    export default {
      name: "Review",
      data(){
        return {
          tabPosition: 'find',
          word_list: [],
          word_list_concat: [],
          feature_input: '',
          imps: ['全部','保留','很重要','重要','不重要'],
          cmds: ['全部','保留','很熟练','熟练','不熟练'],
          word: {
            word: '',
            features: [],
            imp: '全部',
            cmd: '全部'
          },
          formLabelWidth: '120px',
          imageUrl:''
        }
      },
      methods: {
        cloneWordList(){
          this.word_list_concat = this.word_list.concat()
        },
        getWords(){
          let word = this.word
          let param = {
            word: word.word,imp: word.imp, cmd: word.cmd, feature_strs: word.features,token: window.localStorage.getItem("token")
          }
          postRequest('word_consumer/get_word_by_condition', param).then(res=>{
            this.$message({showClose: true, message: "搜索到的单词数："+JSON.stringify(res.data.t.length), type: 'success'})
            this.word_list = res.data.t
            this.cloneWordList()
          }).catch(err=>{
            this.$message({showClose: true, message: JSON.stringify(err), type: 'error'})
          })
        }
      },
      watch: {
        word_list(newv, oldv){
          if (newv.length == 0){

          }
        }
      },
      computed:{
        ...mapState(['sys_features']),
        ...mapGetters({asd:'inc_inc'}),
      },
      components: {WordList, WordDetail, WordBlock}
    }
</script>

<style scoped>

</style>
